<template>
  <div>
    <a-card>
      <a-form :model="pageForm" layout="vertical" @finish="submit">
        <a-form-item
          :label="t('页面设置')"
          name="title"
          required
          :wrapper-col="{
            span: 6,
          }"
        >
          <a-input allow-clear v-model:value="pageForm.title" :max-length="16" show-word-limit />
        </a-form-item>
        <a-form-item name="logo" label="LOGO">
          <a-upload-dragger name="file" :multiple="true" v-if="!pageForm.logo" style="width: 400px">
            <p class="ant-upload-drag-icon">
              <inbox-outlined></inbox-outlined>
            </p>
            <p class="ant-upload-text">Click or drag file to this area to upload</p>
            <p class="ant-upload-hint">
              Support for a single or bulk upload. Strictly prohibit from uploading company data or
              other band files
            </p>
          </a-upload-dragger>
          <a-image v-else :src="pageForm.logo" width="200"></a-image>
        </a-form-item>
        <a-button type="primary" htmlType="submit">{{ t('保存') }}</a-button>
      </a-form>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { updateDetails } from '@/api/modules/auth/store';
import { pageForm } from '../data';
import { notify } from '@/utils/common/common';
const { t } = useI18n();
const submit = async () => {
  const { data } = await updateDetails(pageForm.value);
  notify(data);
};
</script>

<style lang="scss" scoped></style>
